<template>
  <div class="Index_Home">
    <!-- 头部文字描述开始 -->
    <div class="title_text">系统入口</div>
    <!-- 头部文字描述结束 -->
    <div class="box-body">
      <!-- 左侧盒子开始 -->
      <div class="box-l">
        <el-card
          class="box-card"
          shadow="hover"
          v-for="(item, index) in cardList"
          :key="index"
        >
          <div slot="header">
            <i :class="[item.Icon ? item.Icon : 'el-icon-s-opportunity']"></i>
            <span
              style="margin-left: 15px; font-weight: 700; font-size: 18px"
              class="TEXT_HIDDEN"
              >{{ item.Name }}</span
            >
          </div>
          <div>
            <div>账户信息{{ index }}</div>
            <div class="card_bdr">1074{{ index }}</div>
          </div>
        </el-card>
      </div>
      <!-- 左侧盒子结束 -->
      <!-- 右侧盒子开始 -->
      <div class="box-r">
        <el-card class="box-card_tops"> </el-card>
        <el-card class="box-card_top">
          <div slot="header">
            <i class="el-icon-s-opportunity"></i>
            <span>温馨提示</span>
          </div>
          <div>
            <div>账户信息</div>
            <div class="card_bdr">1074</div>
          </div>
        </el-card>
        <el-card class="box-card_bom">
          <div slot="header">
            <span>赤峰市医院</span>
          </div>
          <div>
            <div style="text-align: center">
              <i class="el-icon-s-opportunity"></i>
            </div>
            <div style="text-align: center">赤峰市人民医院索引</div>
          </div>
        </el-card>
      </div>
      <!-- 右侧盒子结束 -->
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "Index_Home",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      cardList: [],
      msg: {},
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }

    this.getCardList();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    getCardList() {
      this.cardList = [];
      this.$post("ThirdMange/PageList/927?page=1&limit=100")
        .then((res) => {
          if (res.code == 0) {
            this.cardList = res.data.list;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.title_text {
  margin: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #6bb1ec;
}
.box-body {
  display: flex;
  .box-l {
    width: 80%;
    height: 870px;
    overflow: auto;
    .box-card {
      display: inline-block;
      width: 23%;
      height: 150px;
      margin: 10px;
      .card_bdr {
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 3px 10px;
      }
    }
  }
  .box-r {
    width: 20%;
    height: 800px;
    i {
      display: inline-block;
      text-align: center;
      font-size: 30px;
      margin: 0 auto;
    }
    .box-card_tops {
      height: 150px;
      background-color: purple;
    }
    .box-card_top {
      height: 250px;
      margin-bottom: 20px;
    }
    .box-card_bom {
      height: 250px;
    }
  }
}
@media screen and (max-width: 1300px) {
  .el-card__header .TEXT_HIDDEN {
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px !important;
    font-weight: 600 !important;
  }
}
.el-scrollbar__wrap {
  overflow: auto !important;
}
</style>
